<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#div1{width: 100px; height: 100px; background-color: red;position: absolute;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');
		var timer = null;
		var iSpeedX = 20;
		var iSpeedY = 20;

		oDiv.onclick = function (){
			clearInterval(timer);
			timer = setInterval(function (){
				var x = oDiv.offsetLeft + iSpeedX;
				var y = oDiv.offsetTop + iSpeedY;

				if (y > document.documentElement.clientHeight - oDiv.offsetHeight) {
					iSpeedY *=-1;
					y = document.documentElement.clientHeight - oDiv.offsetHeight;		//使其一瞬间不会有滚动条出现碰撞
				};
				if (x > document.documentElement.clientWidth - oDiv.offsetWidth) {
					iSpeedX *=-1;
					x = document.documentElement.clientWidth - oDiv.offsetWidth
				};
				if (y < 0) {
					iSpeedY *=-1;
				};
				if (x < 0) {
					iSpeedX *=-1;
				};

				oDiv.style.left = x + 'px';
				oDiv.style.top = y + 'px';

			},30)
		};
	}
	</script>
</head>
<body>
	<div id="div1">点击我</div>
</body>
</html>